<template>
    <div class="pro-detail">
        <a-modal width="90%" :visible="visible" title="生产计划" @cancel="modalCancel" class="yuan-modal pro-detail-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="yuan-container">
                    <div class="page-top">
                        <span class="page-title">{{detailInfo.materialName}}</span>
                        <span style="margin-left:20px">标准：{{detailInfo.standard}}</span>
                    </div>
                    <div class="page-main">
                        <div class="page-info-box">
                            <div class="page-info-list">
                                <div class="list-title">计划编号：</div>
                                <div class="list-info">{{detailInfo.planSerial}}</div>
                            </div>
                            <div class="page-info-list">
                                <div class="list-title">计划日期：</div>
                                <div class="list-info">{{detailInfo.finishTime | format('yyyy-MM-dd')}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="page-main">
                        <div class="panel-title yuan-title">计划投入详情</div>
                        <a-card>
                            <a-tabs type="card" :activeKey="pageType" @change="tabChange">
                                <a-tab-pane v-for="item in typeArr" :key="item" :tab="item"></a-tab-pane>
                            </a-tabs>
                            <div class="planList-top">
                                <div class="yuan-title" style="padding:10px 0;margin-top:30px">
                                    生产数据
                                </div>
                                <template v-if="pageType!=='包装计划'">
                                    <div class="filter-panel">
                                        <div class="filter-list">
                                            <span class="filter-tips ">{{pageInfo.planName}}({{pageInfo.planSerial}})</span>
                                        </div>
                                        <div class="filter-list">
                                            <span class="filter-tips ">计划生产量：</span>
                                            <span class="font-bignum c-success">{{pageInfo.prodNum|toDecimalNoZero}}</span>
                                            <span>kg</span>
                                        </div>
                                        <div class="filter-list">
                                            <span class="filter-tips">投料数量：</span>
                                            <span class="font-bignum c-warning">{{pageInfo.inputNum|toDecimalNoZero}}</span>
                                            <span>kg</span>
                                        </div>
                                    </div>
                                    <div class="table">
                                        <div class="yuan-title" style="padding:10px 0;margin-top:30px">
                                            {{pageInfo.materialType}}
                                        </div>
                                        <a-table bordered :rowKey="(row)=>row.id+row.batch" :data-source="pageList"
                                            :columns="columns" :pagination="false" :loading="loading">
                                        </a-table>

                                        <template v-if="accPageList.length>0">
                                            <div class="yuan-title" style="padding:10px 0;margin-top:50px">
                                                辅料
                                            </div>
                                            <a-table bordered :rowKey="(row)=>row.id" :data-source="accPageList"
                                                :columns="accColumns" :pagination="false" :loading="loading"
                                                v-if="accPageList.length>0">
                                            </a-table>
                                        </template>

                                    </div>
                                </template>
                                <template v-else>
                                    <div style="border:solid 1px #eee;background-color:#f6f6f6;margin-bottom:20px"
                                        v-for="item in planList">
                                        <div class="filter-panel">
                                            <div class="filter-list">
                                                <span class="filter-tips ">包装计划（{{item.planSerial}}）</span>
                                            </div>
                                            <div class="filter-list">
                                                <span class="filter-tips ">产品大类：{{item.inventoryType}}</span>
                                            </div>
                                            <div class="clear-both"></div>
                                            <div class="filter-list">
                                                <span class="filter-tips ">{{item.materialName}}</span>
                                            </div>
                                            <div class="filter-list">
                                                <span class="filter-tips ">计划包装量：</span>
                                                <span class="font-bignum c-success">{{item.prodNum|toDecimalNoZero}}</span>
                                                <span>袋</span>
                                            </div>
                                            <div class="filter-list">
                                                <span class="filter-tips ">{{item.materialType}}投料量：</span>
                                                <span class="font-bignum c-success">{{item.inputNum|toDecimalNoZero}}</span>
                                                <span>kg</span>
                                            </div>
                                        </div>
                                        <div class="table">
                                            <div class="yuan-title" style="padding:10px 0;margin-top:30px">
                                                {{pageInfo.materialType}}
                                            </div>
                                            <a-table bordered :rowKey="(row)=>row.id+row.batch"
                                                :data-source="pageListBz[item.inventoryType]" :columns="columns"
                                                :pagination="false" :loading="loading">
                                            </a-table>
                                        </div>
                                    </div>

                                </template>

                            </div>

                        </a-card>
                    </div>
                </div>

            </a-spin>
            <template slot="footer">
                <!-- <a-button type="primary" @click="clickSave">
                    确认绑定
                </a-button> -->
                <a-button @click="modalCancel">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import warningApi from "@/api/warningApi";
import { toDecimalNoZero } from "@/utils";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component({ name: "TPL", components: {} })
export default class index extends Vue {
    @Prop({ default: "" }) visible!: boolean;
    @Prop({ default: "" }) id!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.getDetailInfo();
        }
    }
    pageType = "";
    detailInfo: any = {};
    loading = false;
    pageData = {};
    closeModal() {
        this.$emit("closeModal");
    }
    modalCancel() {
        this.closeModal();
    }

    processPlanDetailList: any[] = [];
    pageList: any[] = [];
    async getDetailInfo() {
        this.loading = true;
        try {
            const res = await warningApi.getPlanDetial({ id: this.id });
            this.detailInfo = res.data || {};
            this.processPlanDetailList = this.detailInfo.processPlanDetailList;
            let typeArr = this.processPlanDetailList.map((item) => {
                return item.planName;
            });

            typeArr = Array.from(new Set(typeArr));
            typeArr.reverse();
            this.typeArr = typeArr;
            this.pageType = typeArr[0];
            this.getPageList();
        } finally {
            this.loading = false;
        }
    }
    typeArr: string[] = [];
    pageInfo = {};
    accPageList: any[] = [];
    planList: any[] = [];
    pageListBz = {};
    getPageList() {
        const planList = JSON.parse(this.detailInfo.planList || "");
        const filterList = this.processPlanDetailList.filter((item) => {
            return item.planName === "包装计划";
        });
        filterList.forEach((item) => {
            planList.forEach((plan, index) => {
                if (plan.inventoryType === item.inventoryType) {
                    planList[index] = {
                        ...plan,
                        planSerial: item.planSerial,
                        materialName: item.materialName,
                        prodNum: item.prodNum,
                    };
                }
            });
        });
        this.planList = planList;


        if (this.pageType === "包装计划") {
            let pageListBz = {};
            filterList.forEach((item) => {
                pageListBz[item.inventoryType] = item.processPlanInputList;
            });
            this.pageListBz = pageListBz;
            this.pageInfo = {};
            this.accPageList = [];
        } else {
            const find = this.processPlanDetailList.find((item) => item.planName === this.pageType);

            if (find) {
                const pageList: any[] = [];
                const accPageList: any[] = [];
                const processPlanInputList = find.processPlanInputList;
                processPlanInputList.forEach((item) => {
                    if (item.materialType === "辅料") {
                        accPageList.push(item);
                    } else {
                        pageList.push(item);
                    }
                });
                this.pageInfo = find;
                this.pageList = pageList;
                this.accPageList = accPageList;
            } else {
                this.pageInfo = {};
                this.pageList = [];
                this.accPageList = [];
            }
        }
    }
    tabChange(e: string) {
        this.pageType = e;
        this.getPageList();
    }
    accColumns = [
        {
            align: "center",
            dataIndex: "materialName",
            key: "materialName",
            title: "投料名称",
        },
        {
            align: "center",
            dataIndex: "inputNum",
            key: "inputNum",
            title: "投料数量(kg)",
            customRender: (text: string, record: any, index: number) => toDecimalNoZero(record.inputNum),
        },
    ];
    columns: any[] = [
        {
            align: "center",
            dataIndex: "batch",
            key: "batch",
            title: "投料批次",
        },
        {
            align: "center",
            dataIndex: "isPro",
            key: "isPro",
            title: "投料状态",
            customRender: (text: string, record: any, index: number) => (record.isPro==='true' ? "计划生产投料" : "现有库存投料"),
        },
        {
            align: "center",
            dataIndex: "materialName",
            key: "materialName",
            title: "投料名称",
        },
        {
            align: "center",
            dataIndex: "inputNum",
            key: "inputNum",
            title: "预计投料数量(kg)",
            customRender: (text: string, record: any, index: number) => toDecimalNoZero(record.inputNum),
        },
        {
            align: "center",
            dataIndex: "needNum",
            key: "needNum",
            title: "实际投料数量(kg)",
            customRender: (text: string, record: any, index: number) => {
                return toDecimalNoZero(Number(record.inputNum)-Number(record.needNum));
            },
        },
    ];
}
</script>

<style lang="scss">
.pro-detail-modal {
    .page-top {
        padding-bottom: 20px;
        border-bottom: solid 1px #eee;
    }
    .page-title {
        font-weight: bold;
        font-size: 20px;
    }
    .page-main {
        background-color: #fff;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .page-info-list {
        display: inline-flex;
        margin-right: 20px;
    }
    .panel-title {
        font-size: 16px;
        padding-bottom: 10px;
    }
    .planList-top {
        margin-bottom: 20px;
    }
    .table {
        background-color: #fff;
    }
}
</style>
